<!DOCTYPE html>
<html>
<head>
    <title>班组类型</title>
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="/static/plugin/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/static/css/public.css" media="all" />
    <script type="text/javascript" src="/static/plugin/jquery/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="/static/plugin/layui/layui.js"></script>
    <script type="text/javascript" src="/static/js/base.js"></script>
    <style type="text/css">
        .xing
        {
            color: red;
            float: left;
            display: block;
            width: 0.1%;
            margin-top:-25px;
            margin-left: 83%;
            font-size: 24px;
        }
    </style>
</head>
<script type="text/javascript"></script>
<body  class="layui-anim">
<div class="x-nav">
	    <span class="layui-breadcrumb">
	        <a href="">首页</a>
	        <a>
	            <cite>考勤管理</cite>
	        </a>
	    </span>
</div>
<div class="x-body">
    <!--头部检索功能-->
    <div class="layui-row" style="margin-bottom: 18px">
        <form class="layui-form">
            <div class="layui-inline">
                <div class="layui-input-inline" style="float: left">
                    <select class="layui-input" name="keyword1" id="keyword1">
                        <option value="">请选择部门</option>
                    </select>
                </div>
                <button type="button" class="layui-btn layui-btn-normal" data-type="reload"><i class="layui-icon layui-icon-search"></i>检索</button>
            </div>
        </form>
    </div>

    <!--顶部功能-->
    <xblock>
        <button class="layui-btn layui-btn-warm" id="add"><i class="layui-icon layui-icon-add-circle-fine"></i>新增</button>
        <button class="layui-btn layui-btn-danger" id="del"><i class="layui-icon layui-icon-delete"></i>批量删除</button>
        <a class="layui-btn layui-btn-warm" id="assign"><i class="layui-icon layui-icon-edit"></i>分配组员</a>
    </xblock>

    <!--数据列表-->
    <table class="layui-hide" id="tableList" lay-filter="tableList"></table>

    <!--行按钮-->
    <script type="text/html" id="rowToolbar">
        <a class="layui-btn layui-btn-xs" lay-event="update"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    </script>

    <!--所有用户列表-->
    <div id="usersDiv" hidden="hidden">
        <form class="layui-form" id="addFormID2">
            <table id="usersList" lay-filter="usersList"></table>
            <br><br>
            <div align="center">
                <button class="layui-btn" id="addUsers" lay-submit lay-filter="addUsers">立即提交</button>
            </div>
        </form>
    </div>
    <br><br><br><br>

    <!--班组中用户列表-->
    <div class="x-body" id="teamDetailDiv" hidden="hidden">
        <xblock>
            <button class="layui-btn layui-btn-danger" id="delUsers"><i class="layui-icon layui-icon-delete"></i>批量删除</button>
        </xblock>
        <table class="layui-hide" id="tableListDetail" lay-filter="tableListDetail"></table>
    </div>
</div>
<!-- 添加/编辑框 -->
<div id="addDivID" class="layui-form" style="display:none">
    <form class="layui-form" id="addFormID" style="margin-top:20px" action="" lay-filter="">
        <input type="hidden" id="attendanceId" name="attendanceId">
        <xblock>
            <table>
                <tr>
                    <td><label class="layui-form-label">部门名称</label></td>
                    <td>
                        <div class="layui-input-inline" style="float: left">
                            <select class="layui-input" name="departmentId" id="departmentId" lay-verify="request">
                                <option value="">请选择部门</option>
                            </select>
                        </div>
                        <span class="xing" style="margin-left: 101%;">*</span>
                    </td>
                    <td><label class="layui-form-label">班组类型</label></td>
                    <td>
                        <div class="layui-input-inline" style="float: left">
                            <select class="layui-input" name="teamType" id="teamType" lay-verify="request">
                                <option value="">请选择班组</option>
                            </select>
                        </div>
                        <span class="xing" style="margin-left: 101%;">*</span>
                    </td>
                </tr>
                <tr style="height: 10px"></tr>
                <tr>
                    <td><label class="layui-form-label" >上班时间</label></td>
                    <td>
                        <input  class="layui-input" id="attendanceTime" name="attendanceTime" lay-verify="request" placeholder="HH:mm:ss" type="text" style="width: 213px;">
                        <span class="xing" style="margin-left: 101%;">*</span>
                    </td>
                    <td><label class="layui-form-label" style="width: 100px">开始打卡时间</label></td>
                    <td>
                        <input  class="layui-input" id="attendanceClockTime" name="attendanceClockTime" lay-verify="request" placeholder="HH:mm:ss" type="text" style="width: 213px;">
                        <span class="xing" style="margin-left: 101%;">*</span>
                    </td>
                </tr>
                <tr style="height: 10px"></tr>
                <tr>
                    <td><label class="layui-form-label">下班时间</label></td>
                    <td>
                        <input  class="layui-input" id="closingTime" name="closingTime" lay-verify="request" placeholder="HH:mm:ss" type="text" style="width: 213px;">
                        <span class="xing" style="margin-left: 101%;">*</span>
                    </td>
                    <td><label class="layui-form-label" style="width: 100px">结束打卡时间</label></td>
                    <td>
                        <input  class="layui-input" id="closingClockTime" name="closingClockTime" lay-verify="request" placeholder="HH:mm:ss" type="text" style="width: 213px;">
                        <span class="xing" style="margin-left: 101%;">*</span>
                    </td>
                </tr>
                <tr style="height: 10px"></tr>
                <tr>
                    <td><label class="layui-form-label">公司地址</label></td>
                    <td>
                        <input  class="layui-input" id="addressInformation" name="addressInformation" lay-verify="request" style="width: 213px;">
                        <span class="xing" style="margin-left: 101%;">*</span>
                    </td>
                    <td><label class="layui-form-label" style="width: 100px">打卡半径(km)</label></td>
                    <td>
                        <input  class="layui-input" id="toleranceRange" name="toleranceRange" lay-verify="request" style="width: 213px;">
                        <span class="xing" style="margin-left: 101%;">*</span>
                    </td>
                </tr>
                <tr style="height: 10px"></tr>
                <tr>
                    <td><label class="layui-form-label">经度</label></td>
                    <td>
                        <input  class="layui-input" id="lon" name="lon" lay-verify="request" style="width: 213px;">
                        <span class="xing" style="margin-left: 101%;">*</span>
                    </td>
                    <td><label class="layui-form-label" style="width: 100px">纬度</label></td>
                    <td>
                        <input  class="layui-input" id="lat" name="lat" lay-verify="request" style="width: 213px;">
                        <span class="xing" style="margin-left: 101%;">*</span>
                    </td>
                </tr>
                <tr style="height: 10px"></tr>
                <tr>
                    <td><label class="layui-form-label" style="width: 100px">每日工作时长(h)</label></td>
                    <td>
                        <input  class="layui-input" id="overtime" name="overtime" lay-verify="request" style="width: 213px;">
                        <span class="xing" style="margin-left: 101%;">*</span>
                    </td>
                    <td><label class="layui-form-label">说明</label></td>
                    <td>
                        <input  class="layui-input" id="description" name="description" style="width: 213px;">
                    </td>
                </tr>
                <tr style="height: 20px"></tr>
            </table>
        </xblock>
        <div align="center">
            <button class="layui-btn" type="button" id="subBtn" lay-submit lay-filter="addForm">立即提交</button>
            <button  class="layui-btn layui-btn-primary">取消</button>
        </div>
    </form>
</div>
<script type="text/javascript">
    var attendanceId;
    layui.use(['table','layer','upload','form','laydate'], function(){
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;

        /*检索按钮调用的方法*/
        var $ = layui.jquery, active = {
            reload:function () {
                var keyword01 = $("#keyword1").val();
                table.reload('contenttable',{
                    method:'get',
                    where:{"departmentId":keyword01}
                    ,page: {
                        curr: 1//重新从第 1 页开始
                    }
                });
            }
        }

        //时间选择器
        laydate.render({
            elem: '#attendanceTime'
            ,type: 'time'
        });
        //时间选择器
        laydate.render({
            elem: '#attendanceClockTime'
            ,type: 'time'
        });
        //时间选择器
        laydate.render({
            elem: '#closingTime'
            ,type: 'time'
        });
        //时间选择器
        laydate.render({
            elem: '#closingClockTime'
            ,type: 'time'
        });

        //点击行checkbox选中
        $(document).on("click",".layui-table-body table.layui-table tbody tr", function () {
            var index = $(this).attr('data-index');
            var tableBox = $(this).parents('.layui-table-box');
            //存在固定列
            if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length>0) {
                tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
            } else {
                tableDiv = tableBox.find(".layui-table-body.layui-table-main");
            }
            var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
            if (checkCell.length>0) {
                checkCell.click();
            }
        });

        $(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
            e.stopPropagation();
        });

        $('.layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        /*班组类型数据列表*/
        table.render({
            elem: '#tableList'
            ,url:'/attendance/queryAttendanceType'
            ,title: '班组类型'
            ,id :'contenttable'
            ,limits:[10,20,30]
            ,toolbar: '#toolbar'
            ,cols: [
                [
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'attendanceId', title:'序号', sort: true, type:'numbers', width: 60}
                    ,{field:'deptName', title:'部门名称'}
                    ,{field:'teamName', title:'班组名称'}
                    ,{field:'attendanceTime', title:'上班时间'}
                    ,{field:'attendanceClockTime', title:'开始打卡时间'}
                    ,{field:'closingTime', title:'下班时间'}
                    ,{field:'closingClockTime', title:'结束打卡时间'}
                    ,{field:'overtime', title:'每日工作时长'}
                    ,{field:'addressInformation', title:'公司地址'}
                    ,{field:'lon', title:'经度'}
                    ,{field:'lat', title:'纬度'}
                    ,{field:'toleranceRange', title:'打卡半径'}
                    ,{field:'description', title:'说明'}
                    ,{fixed:'right',unresize: true, title:'操作', toolbar: '#rowToolbar',width:100, align: 'center'}
                ]
            ]
            ,page: true
            ,done : function(){
                $('th').css({
                    'background-color': '#009688', 'color': '#fff','font-weight':'bold',
                })
            }
        });

        //监听复选框事件
        table.on('checkbox(tableList)',function(obj){
            if(obj.checked == true && obj.type == 'all'){
                //点击全选
                $('.layui-table-body table.layui-table tbody tr').addClass('layui-table-click');
            }else if(obj.checked == false && obj.type == 'all'){
                //点击全不选
                $('.layui-table-body table.layui-table tbody tr').removeClass('layui-table-click');
            }else if(obj.checked == true && obj.type == 'one'){
                //点击单行
                if(obj.checked == true){
                    obj.tr.addClass('layui-table-click');
                }else{
                    obj.tr.removeClass('layui-table-click');
                }
            }else if(obj.checked == false && obj.type == 'one'){
                //点击全选之后点击单行
                if(obj.tr.hasClass('layui-table-click')){
                    obj.tr.removeClass('layui-table-click');
                }
            }
        })


        /**
         * 表单校验
         */
        form.verify({
            //value：表单的值、item：表单的DOM对象
            request: function(value){
                if(value == ''){
                    return '不能为空';
                }
            }
        });

        //新增
        $("#add").click(function(){
            layer.open({
                type: 1 					//Page层类型
                ,area: ['750px', '500px'] 	//宽  高
                ,title: '新增'
                ,shade: 0.6 				//遮罩透明度
                ,maxmin: true 				//允许全屏最小化
                ,anim: 1 					//0-6的动画形式，-1不开启
                ,content:$('#addDivID')
                ,success: function(){
                    $("#attendanceId").val("");
                    //初始化数据
                    $("#addFormID").find('input[class=layui-input],select').each(function() {
                        $(this).val('');
                    });
                    form.render();
                }
            });
        });

        //行按钮（编辑、分配组员）
        table.on('tool(tableList)', function(obj){
            var data = obj.data;
            /*编辑*/
            if (obj.event === 'update') {
                layer.open({
                    type: 1 					//Page层类型
                    ,area: ['750px', '500px'] 	//宽  高
                    ,title: '编辑'
                    ,shade: 0.6 				//遮罩透明度
                    ,maxmin: true 				//允许全屏最小化
                    ,anim: 1 					//0-6的动画形式，-1不开启
                    ,content:$('#addDivID')
                    ,success: function(){
                        //初始化数据
                        $("#addFormID").find('input[class=layui-input],select').each(function() {
                            $(this).val('');
                        });
                        //数据回显
                        for(var i=0;i<Object.entries(data).length;i++) {
                            var id = '#' + Object.entries(data)[i][0];
                            var text = Object.entries(data)[i][1];
                            $(id).val(text);
                        }
                        form.render();
                    }
                });
            }
        });

        //批量删除班组类型
        $("#del").click(function(){
            var rowData = table.checkStatus('contenttable');
            var data = rowData.data;
            var idArr = new Array();
            if(data.length == 0){
                layer.alert("请至少选择一条记录！",{icon :5});
            } else {
                var ids="";
                for(var i=0;i<data.length;i++){
                    if(ids == ""){
                        ids += data[i].attendanceId;
                    }else{
                        ids += "," + data[i].attendanceId;
                    }
                }
                layer.confirm('确定删除吗？', function(){
                    $.ajax({
                        type:'post',
                        url:'/attendance/deleteAttendanceTeamType',
                        data:{"ids" : ids},
                        dataType:"json",
                        success:function(data){
                            if(data > 0){
                                layer.msg("删除成功！",{icon:6});
                                layer.closeAll();
                                table.reload('contenttable',{
                                    method:'get',
                                    page: {
                                        curr: 1//重新从第 1 页开始
                                    }
                                });
                            }else{
                                layer.msg("删除失败！",{icon:5});
                                layer.closeAll();
                                table.reload('contenttable',{
                                    method:'get',
                                    page: {
                                        curr: 1//重新从第 1 页开始
                                    }
                                });
                            }

                        }
                    });
                });
            }
        });

        //分配组员
        $('#assign').click(function(){
            var checkStatus = table.checkStatus('contenttable');
            var data = checkStatus.data;
            if(data.length == 1){
                //获取该行的班组类型的ID
                attendanceId = data[0].attendanceId;
                layer.open({
                    type: 1 					//Page层类型
                    ,area: ['500px', '700px'] 	//宽  高
                    ,title: '用户列表'
                    ,shade: 0.6 				//遮罩透明度
                    ,maxmin: true 				//允许全屏最小化
                    ,anim: 1 					//0-6的动画形式，-1不开启
                    ,content: $('#usersDiv')
                    ,end: function () {
                        var formDiv = document.getElementById('usersDiv');
                        formDiv.style.display = '';
                    }
                    ,success: function(){
                        table.render({
                            elem: '#usersList'
                            ,url:'/attendance/queryUsersAreNotOnTheTeam'
                            ,title: '用户列表'
                            ,id :'userstable'
                            ,limits:[100,200,300]
                            ,cols: [
                                [
                                    {type: 'checkbox', fixed: 'left'}
                                    ,{field:'userId', title:'序号', sort: true, type:'numbers', width: 60}
                                    ,{field:'jobNumber', title:'工号'}
                                    ,{field:'realName', title:'姓名'}
                                    /*,{field:'sex', title:'性别'}*/
                                    ,{field:'phoneNumber', title:'电话'}
                                ]
                            ]
                            ,page: false
                            ,done : function(){
                                $('th').css({
                                    'background-color': '#009688', 'color': '#fff','font-weight':'bold',
                                })
                            }
                        });
                    }
                });
            }else{
                layer.msg('请先选择班组！',{icon:5});
            }
        });

        /**
         * 表单提交(新增、编辑)
         */
        form.on('submit(addForm)', function () {
            var index = layer.msg('提交中，请稍候',{icon: 16,time:false,shade:0.8});
            var title = "新增";
            var url = '/attendance/insertAttendanceTeamType';
            var id = $.trim($("#attendanceId").val());
            if(id != "" && id != null && id != 'undefined'){
                title = "编辑";
                url = '/attendance/updateAttendanceTeamType';
            }
            $.ajax({
                type:'post',
                url:url,
                data:$("#addFormID").serialize(),
                cache:false,
                dataType: 'JSON',
                success:function(data){
                    if (data > 0) {
                        layer.closeAll();
                        setTimeout(function(){
                            layer.msg(title+'成功！',{icon:6});
                        },500);
                        table.reload('contenttable',{
                            method:'get',
                            page: {
                                curr: 1//重新从第 1 页开始
                            }
                        });
                    } else {
                        layer.msg(title+'失败！',{icon:5});
                        layer.close(index);
                    }
                }
            });
            return false;
        })

        /**
         * 分配组员
         */
        form.on('submit(addUsers)', function (data) {
            var checkStatus = table.checkStatus('userstable');
            var data = checkStatus.data;
            if(data.length > 0){
                var ids="";
                for(var i=0;i<data.length;i++){
                    if(ids == ""){
                        ids += data[i].userId;
                    }else{
                        ids += "," + data[i].userId;
                    }
                }
                $.ajax({
                    type:'post',
                    url:'/attendance/insertAttendanceTeamUser',
                    data:{"ids" : ids, "attendanceId":attendanceId},
                    dataType:"json",
                    success:function(data){
                        if(data > 0){
                            layer.msg("绑定成功！",{icon:6});
                            layer.closeAll();
                            table.reload('contenttable',{
                                method:'get',
                                page: {
                                    curr: 1//重新从第 1 页开始
                                }
                            });
                        }else{
                            layer.msg("绑定失败！",{icon:5});
                            layer.closeAll();
                            table.reload('contenttable',{
                                method:'get',
                                page: {
                                    curr: 1//重新从第 1 页开始
                                }
                            });
                        }

                    }
                });
            }
        });

        //行点击配置
        table.on('row(tableList)', function(obj){
            var data = obj.data;
            $('#teamDetailDiv').show();
           /* console.log(data.attendanceId)*/
            table.render({
                elem: '#tableListDetail'
                ,title: '班组成员列表'
                ,id :'contenttableDetail'
                ,url:'/attendance/queryTeamMembers'
                ,where:{"teamId":data.attendanceId}
                ,toolbar: '#toolbar'
                ,request: {   //如果无需自定义请求参数，可不加该参数
                    pageName: 'page' //页码的参数名称，默认：page
                    ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
                }
                ,cols: [
                    [
                        {type: 'checkbox', fixed: 'left'}
                        ,{field:'#', title:'序号', sort: true, type:'numbers', width: 60}
                        ,{field:'jobNumber', title:'工号'}
                        ,{field:'realName', title:'姓名'}
                        ,{field:'sex', title:'性别', templet: function (row){
                            if(row.sex == 0){
                                return "女";
                            }else{
                                return "男";
                            }
                        }}
                        ,{field:'phoneNumber', title:'电话'}
                    ]
                ]
                ,page: false
                ,done : function(){
                    $('th').css({
                        'background-color': '#009688', 'color': '#fff','font-weight':'bold',
                    })
                }
            });
        });

        //批量删除班组内用户
        $("#delUsers").click(function(){
            var rowData = table.checkStatus('contenttableDetail');
            var data = rowData.data;
            var idArr = new Array();
            if(data.length == 0){
                layer.alert("请至少选择一条记录！",{icon :5});
            } else {
                var ids="";
                for(var i=0;i<data.length;i++){
                    if(ids == ""){
                        ids += data[i].userId;
                    }else{
                        ids += "," + data[i].userId;
                    }
                }
                layer.confirm('确定删除吗？', function(){
                    /*console.log("进删除方法");*/
                    $.ajax({
                        type:'post',
                        url:'/attendance/deleteAttendanceTeamUser',
                        data:{"ids" : ids},
                        dataType:"json",
                        success:function(data){
                            /*console.log("删除成功");*/
                            if(data > 0){
                                layer.msg("删除成功！",{icon:6});
                                layer.closeAll();
                                table.reload('contenttableDetail',{
                                    method:'get',
                                    page: {
                                        curr: 1//重新从第 1 页开始
                                    }
                                });
                            }else{
                                layer.msg("删除失败！",{icon:5});
                                layer.closeAll();
                                table.reload('contenttableDetail',{
                                    method:'get',
                                    page: {
                                        curr: 1//重新从第 1 页开始
                                    }
                                });
                            }

                        }
                    });
                });
            }
        });
    });

    /*下拉框查找所有部门*/
    function addSelectDept() {
        $('#departmentId').empty();
        $.ajax({
            type: 'POST',
            url: '/attendance/getDeptList',
            dataType: 'json',
            async: false,
            success: function (datas){
                for (var i = 0; i < datas.length; i++) {
                    $("#departmentId").append("<option value='"+ datas[i].deptId +"'>"+ datas[i].deptName +"</option>");
                    $("#keyword1").append("<option value='"+ datas[i].deptId +"'>"+ datas[i].deptName +"</option>");
                }
            }
        });
    }

    /*下拉框查找所有班组*/
    function addSelectTeam() {
        $('#teamType').empty();
        $.ajax({
            type: 'POST',
            url: '/attendance/getTeamList',
            dataType: 'json',
            async: false,
            success: function (datas){
                for (var i = 0; i < datas.length; i++) {
                    $("#teamType").append("<option value='"+ datas[i].teamId +"'>"+ datas[i].teamName +"</option>");
                }
            }
        });
    }

    window.onload = addSelectDept();
    window.onload = addSelectTeam();
</script>
</body>
</html>
